<!-- Dom模板 -->
<template>
   <div class="searchBoxs">
    <!-- Dom内容 -->
        <div class="search-box">
                <div class="row1-top">
                              <p @click="fan" class="iconfont icon-iconfontyoujiantou-zuo"></p>
                              <h2>搜索内容</h2>
                              <p></p>
                </div>
                 <div class="row2-main">
                                <div class="row2-main-alive" v-for="(item,index) in $store.state.search.searchData" :key="index" @click="xq(item,$route.path)">
                                            <div class="main-alive-image">
                                                        <img :src="item.book_img_url"/>
                                                        <p class="xiao"><span class="iconfont icon-biao"></span>{{item.see_num}}万</p>
                                                    </div>
                                                    <div class="main-alive-right">
                                                        <h3>{{item.bookname}} <span>完结</span> </h3>
                                                        <p class="jies">{{item.describes}}</p>
                                                        <div class="right-bott">
                                                            <div class="right-left">
                                                                <p>{{item.name}}</p>
                                                                <p class="leix" ref="leix">
                                                                  <span>{{item.typesname[0]}}</span>
                                                                </p>
                                                        </div>
                                                                <p>{{item.score}}</p>
                                                        </div>
                                                </div>
                                    </div>
                                     <div v-if="koFlag" class="main-alive-kong">
                                        <span class="iconfont icon-fangdajing1"></span>
                                        <p>"{{$store.state.search.searchItem}}"</p>
                                        <p>没有找到相关内容</p>
                                    </div>
                    </div>

                    <!-- 推荐的内容-->
                            <!-- 好书推荐部分 -->
                            <div class="home-row1">
                                        <div class="row1-top">
                                            <h2>为您推荐</h2>
                                        </div>
                                        <!-- 好书推荐中的所有书 -->
                                        <div class="row1-alive">
                                                <div class="some-book" v-for="(item,index) in $store.state.homes.data" :key="index" @click="xq(item,$route.path)">
                                                    <img :src="item.book_img_url" alt="">
                                                    <h4>{{item.bookname}}</h4>
                                                    <p>{{item.see_num}}万次</p>
                                                </div>
                                        </div>
                            </div>
        </div>
   </div>
</template>

<script>
// import a from './a'; // 引入组件
import {myMixins} from '@/mixins/homeMixins.js'
export default {
  mixins:[myMixins],
  name: '',
  data() {
    return {
      msg: '测试',
      koFlag:false
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
      
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.$store.dispatch('homes/getDataChange','推荐') 
    if(this.$store.state.search.searchData.length===0){
           this.koFlag=true 
    }
  },
  // Vue方法定义
  methods: {
      fan(){
          this.$router.history.push('/search')
      }
  }
}
</script>

<style scoped>
/* @import url(''); 引入css类 */
@import url("../../../static/fonts/iconfont.css");
.searchBoxs{
    width:100%;
    height:100%; 
     overflow-y: auto;
     background-color: white;
}
        .search-box{
            width:100%;
            height:100%;
          
        }
          .row1-top{
             width: 90%;
            height: 1.173333rem;
            margin-left: 3%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.346667rem;
        }
        .row1-top p:nth-child(1){
            font-size: 0.746667rem;
        }
        .row1-top h2{
            font-size:18px;
        }
        .row2-main{
            width:100%;
            margin-top:15px;
        }
        .row2-main-alive{
            width:95%;
            height:3.193333rem;
            margin-left:2.5%;
            display: flex;
            justify-content: space-between;
            text-align:left;
            margin-top:5px;
        }
        
        .main-alive-image{
            width:2.64rem;
        }
        .main-alive-image img{
            width:100%;
            height: 2.56rem;
        }
        .xiao{
            position: relative;
            bottom:0.566667rem;
            left:5px;
            color:#FFFFFF;
        }
        .main-alive-right{
            width:60%;
             height: 2.8rem;
             position: relative;
        }
        .main-alive-right h3 span{
            width:1.013333rem;
            height:.48rem;
            border:1px solid #FFB887;
            display: inline-block;
            text-align: center;
            line-height: .48rem;
            border-radius: 5px;
            color:#FFB887;
            font-size: 12px;
            font-family: PingFangSC-bold;
            
        }
        .main-alive-right p:nth-child(2){
            font-family: PingFangSC-regular;
        }
        /* 推荐 */
        .home-row1{
            width:100%;
        }
        .row1-top span{
            display:inline-block;
            font-size:16px;
            color:#999999;
        }
        .row1-alive{
            width:100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

        }
        .some-book{
            width:30%;
            display:flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-top:5px;
        }
        .some-book img{
            width:2.22rem;
            height:3.226667rem;
            border-radius:5%;
            /* margin-left:calc(calc(2.7rem - 2.22rem)/2); */
        }

        .some-book h4,.some-book p{
            width:100%;
            height:25px;
            line-height: 25px;
            text-align:center;
            padding:5px 5px;
        }
        .some-book h4{
            font-size:15px;
            font-family: "宋体";
            color:rgba(77, 77, 77, 100);
        }
        .some-book p{
            color:rgba(153, 153, 153, 100);
            font-size:12px;
            margin-top:15px;
        }
        .jies{
            width:100%;
            height:0.8rem;
            overflow-y:auto;
            color:#676767;
            margin-top:.133333rem;
        }
        .right-bott{
            width:100%;
            height:.666667rem;
            align-items: center;
            display: flex;
            justify-content: space-between;
            position: absolute;
            bottom:0;
            left:0;
        }
        .right-left{
            width:75%;
            align-items: center;
            display: flex;
            justify-content: space-around;
            color:#ADADAD;
            font-size:12px;
        }
        .leix{
            width:45%;
            height:auto;
            padding:0 5px;
            display:flex;
            justify-content: space-around;
            align-items: center;
            font-size:10px;
        }
       .leix span{
          width: auto;
          padding: 0 0.5px;
          height: 0.55rem;
          line-height: 0.55rem;
          text-align: center;
          border: 1px solid #ADADAD;
          border-radius: 3px;
       }
        .home-box{
          width:100%;
          height:350px;
        }
        .right-bott>p:nth-child(2){
          color: rgba(255, 23, 0, 100);
          font-size: 17px;
          text-align: left;
          font-family: PingFangSC-regular;
        }
        .main-alive-kong{
            width:100%;
            text-align:center;
            margin-top:20px;
        }
        .main-alive-kong span{
            font-size:25px;
        }
        .main-alive-kong p{
            padding:10px 0;
        }
</style>